<!DOCTYPE HTML>
<html lang="en-US">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>CSS3全屏焦点图显示背景效果</title>
	<link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css" media="all" />
	<!--<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.css" />-->
	<style type="text/css">
		#bg1>div:nth-child(1),
		#bg2>div:nth-child(1) {
			margin-top: 140px;
			font-size: 70px;
			text-align: center;
			color: white;
			text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8), -2px -2px 1px rgba(0, 0, 0, 0.3), -3px -3px 1px rgba(0, 0, 0, 0.3);
		}

		#bg1>div:nth-child(2) {
			text-align: center;
			font-size: larger;
			color: lightsalmon;
			margin-bottom: 40px;
			text-align: center;
			font-size: larger;
			color: lightsalmon;
		}

		.tel {
			font-size: 35px;
			margin-top: 10px;
		}

		.br {
			border: 1px solid aliceblue;
			width: 555px;
			margin-left: 50%;
			position: relative;
			left: -335px;
			border-radius: 20px;
			padding: 30px 50px;
		}

		.content {
			margin-top: 0;
			height: 180px;
			overflow-y: scroll;
		}
	</style>
</head>

<body>
	<div class="slider">
		<ul class="clearfix">
			<li><a href="#bg1">个人信息<br/>personal info</a></li>
			<li><a href="#bg2">教育经历<br/>Educational experience</a></li>
			<li><a href="#bg3">校园生活<br/>campus life</a></li>
			<li><a href="#bg4">开发项目<br/>Development project</a></li>
			<li><a href="#bg5">自我评价<br/>Self-evaluation</a></li>
		</ul>
	</div>

	<div style="background-color:#02646e" class="bg slideLeft" id="bg1">
		<div>张杨涓</div>
		<div>拼命去争取成功,但不要期望一定会成功.</div>
		<div class="br">
			<div class="tel" style="margin-top: 0;">电话：18677380876</div>
			<div class="tel">邮箱：zhangyangjuanzyj@qq.com</div>
		</div>
	</div>
	<div style="background-color:#eb0837" class="bg slideBottom" id="bg2">
		<div>2013.9–2017.7<br/>桂林电子科技大学（本科）<br/>电子信息工程</div>
		<div class="br" style="height:165px;overflow:hidden">
			<div class="content">电子信息工程专业主要是学习基本电路知识，并掌握用计算机等处理信息的方法。首先要有扎实的数学知识，对物理学的要求也很高，并且主要是电学方面；要学习许多电路知识、电工基础、电子技术、信号与系统、计算机控制原理、通信原理等基本课程。学习电子信息工程自己还要动手设计、连接一些电路并结合计算机进行实验，对动手操作和使用工具的要求也是比较高的。譬如自己连接传感器的电路，用计算机设置小的通信系统，还会参观一些大公司的电子和信息处理设备，理解手机信号、有线电视是如何传输的等，并能有机会在老师指导下参与大的工程设计。学习电子信息工程，要喜欢钻研思考，善于开动脑筋发现问题。</div>
		</div>
	</div>
	<div style="background-color:#67b374" class="bg zoomIn" id="bg3">3</div>
	<div style="background-color:#e6674a" class="bg zoomOut" id="bg4">4</div>
	<div style="background-color:#e61061" class="bg rotate" id="bg5">5</div>
</body>
<script src="js/jquery.js" />
<!--<script src="js/scroll/jquery.mCustomScrollbar.concat.min.js" />-->
<script type="text/javascript">
	$(".slider").find("li")[0].click();
	// $(".content").mCustomScrollbar({
	// 	scrollButtons: {
	// 		enable: true
	// 	},
	// 	theme: "light-thick"
	// });

</script>

</html>